<template>
  <div v-loading="false" class="app-main-content-box tag-manage">
    <app-main-title title="标签库" />

    <!-- 筛选搜索 -->
    <el-form ref="form" label-width="90px" size="small">
      <el-form-item label="标签名称：">
        <el-input
          v-model="titleValue"
          clearable
          placeholder="输入标签名称搜索，若无对应标签可按Enter键添加"
          maxlength="7"
          show-word-limit
          @input="filterTagsInput"
          @keyup.enter.native="add"
        />
      </el-form-item>
    </el-form>

    <el-tag
      v-for="(tag,index) in titleValue!=''?filterList:list"
      :key="tag.id"
      closable
      effect="dark"
      :disable-transitions="true"
      :hit="true"
      @close="del(tag,index)"
    >{{ tag.title }}</el-tag>
  </div>
</template>

<script>
import { getTagList, addTag, delTag } from '../../api/tag'
export default {
  data() {
    return {
      titleValue: '',
      // 状态
      loading: false,
      // 数据
      list: [],
      filterList: [],
      form: {
        title: ''
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取列表
    fetchData() {
      getTagList()
        .then(res => {
          this.list = res.data
        })
        .catch(() => {})
        .finally(() => {})
    },

    del(tag, index) {
      this.$confirm(
        `确定删除标签：${tag.title}（删除标签后，已添加此标签的资源不会有此属性标签）?`,
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
          roundButton: true
        }
      )
        .then(() => {
          const params = {}
          params.tagId = tag.id
          this.loading = true
          delTag(params)
            .then(res => {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.list.splice(index, 1)
            })
            .catch(() => {})
            .finally(() => {
              this.loading = false
            })
        })
        .catch(() => {})
    },

    add() {
      const titleValue = this.titleValue
      if (titleValue) {
        // 判断是否已存在
        const flag = this.list.some(v => {
          if (v.title === titleValue) {
            this.$message.warning('已存在该标签')
            return true
          }
        })
        if (flag) return
        const params = {}
        params.title = titleValue
        this.loading = true
        addTag(params)
          .then(res => {
            this.$notify({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000,
              offset: 40
            })
            this.fetchData()
          })
          .catch(() => {})
          .finally(() => {
            this.loading = false
            this.inputVisible = false
            this.titleValue = ''
          })
      } else {
        this.inputVisible = false
        this.titleValue = ''
      }
    },

    /**
       * 状态组
       */
    // 查询tags
    filterTagsInput(val) {
      this.filterList = this.list.filter(v => {
        return v.title.indexOf(val) !== -1
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .tag-manage {
    .el-tag {
      margin-right: 20px;
      margin-bottom: 20px;
    }
    .el-input {
      width: 400px;
    }
  }
</style>
